<template>
	<div class="classify flex flexv">
		<pub-head title="商品分类" backIco="false"></pub-head>

		<!-- 搜索 -->
		<router-link :to="'/search'" class="head-search flex">
			<input type="text" class="flex1" readonly placeholder="请输入商品搜索">
		</router-link>
		<!-- <router-link :to="'/search'" class="head-search flex">
            <input type="text" class="flex1" readonly placeholder="请输入商品搜索">
        </router-link> -->

		<!-- 分类 -->
		<div class="items flex">
			<div class="item flex1 flexc click bold" :class="{'red': fir}" @click="selectType">
				<p>{{typeName}}</p>
			</div>
			<div class="item flex1 flexc click bold" @click="selectAge">{{ageName}}</div>
			<div class="item flex1 flexc click bold price" :class="{'red': prct,'up': prc == 1, 'down': prc == 2}" @click="selectPrice">
				<p>{{priceName}}</p>
			</div>
			<div class="item flex1 flexc click bold sales" :class="{'red': salt,'up': sal == 2,'down': sal == 1}" @click="selectSale">
				<p>{{salesName}}</p>
			</div>
		</div>

		<!-- 占位符 -->
		<div class="fixed-space">&nbsp;</div>

		<!-- 种类弹窗 -->
		<van-popup v-model="types" class="type-popup flex" position="top">
			<div class="type-lists-box flex">
				<ul class="flex1 type-lists flexv">
					<!-- <li class="type-list click" :class="{'red': fir == 0}" @click="firstStep(0)" >全部</li> -->
					<li class="type-list click" :class="{'red': fir == item.id}" @click="firstStep(item)" v-for="item in slotList"
					 :key="item.id">{{item.name}}</li>
				</ul>
			</div>
			<div class="type-lists-box second-menu flex">
				<ul class="flex1 type-lists flexv">
					<li class="type-list click" :class="{'red': sec == child.id}" @click="secstep(child.id,child.name,child.type)" v-for="child in item_cate"
					 :key="child.id">{{child.name}}</li>
				</ul>
			</div>
		</van-popup>

		<!-- 列表 -->
		<list v-model="loading" :finished="finished" :immediate-check="false" finished-color="#999" v-if="!isEmpty" @load="onLoad">
			<ul class="lists flexv">
				<li class="flex list" v-for="item in list" :key="item.id">
					<div class="flex1 flex" @click="toDetail(item.goods_id,item.item_type)">
						<div class="list-img flex">
							<img v-lazy="item.image" alt="">
						</div>
						<div class="list-right flex1 flexv jus-b">
							<h3 class="twoline bold">{{item.goods_name}}</h3>
							<div class="price-box flex jus-b ali-b">
								<div class="flex">
									<div class="red flex ali-b">￥<p class="ali-b">{{item.goods_price}}<span>起</span></p>
									</div>
									<span style="margin-left: 0.2rem;" class="sales tc" v-if="item.return_price>=0">分享赚￥{{item.return_price}}</span>
								</div>
								<div class="buy-btn tc red">已售 {{item.sales_actual}}</div>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</list>
		<!--为空-->
		<empty :ico="emptyIco" tip="暂时没有相关商品哦~" tipColor="#666" v-if="isEmpty"></empty>

		<pub-foot index="classify"></pub-foot>

	</div>
</template>
<script>
	import Vue from 'vue';
	import pubHead from '@/components/head';
	import pubFoot from '@/components/foot';
	import list from '@/components/listLoad/listLoad';
	import empty from '@/components/empty/empty';
	import {
		Popup,
		Toast
	} from 'vant';
	import {
		Classify,
		ClassifyItem
	} from '@/request/api';

	export default {
		data() {
			return {
				isReload: true, // 刷新
				uid: '', //用户id
				types: false, // 种类
				ages: false, // 年龄
				prices: false, // 价格
				typeName: '分类', // 种类类名
				ageName: '附近', // 种类类名
				priceName: '价格', // 种类类名
				salesName: '销量', // 种类类名
				sales: false, // 销量
				fir: null, // 一级菜单下标
				sec: null, // 二级菜单下标
				typeId: null, //分类id
				sarea: null, // 选中地区
				sarealists: null, // 地区列表
				squot: null, // 选中商圈
				squotlists: null, // 商圈列表
				ag: null, //
				prc: 1, //
				prct: false, //
				salt: false, //
				sal: 1, //
				slotList: [], //筛选信息列表
				item_cate: [], //二级分类列表
				ismoreArea: true, //是否有更多地区
				// 列表参数
				cateId: '', // 
				cart_num: null, // 购物车数量
				list: [],
				loading: true,
				finished: false,
				page: 0,
				pagesize: 6,
				isEmpty: false, //列表是否为空
				emptyIco: require('@/assets/empty-data.png'), // 为空图片
				lng: '', // 经度
				lat: '', // 维度
				goodsType:'',
				queryId:'',
				queryType:''
			}
		},
		components: {
			pubHead,
			pubFoot,
			list,
			empty,
			'van-popup': Popup,
		},
		watch: {

		},
		created() {
			if(this.$route.query.typeName)
			{
				this.typeName = this.$route.query.typeName
				this.queryId = this.$route.query.id
				this.queryType = this.$route.query.type
			}
			this.$loading();
			Classify({}).then(res => {
				Toast.clear();
				if (res.code == 1) {
					this.slotList = res.data;
					this.item_cate = this.slotList[0].child;
					// this.initData()
					this.onLoad();
				} else {
					this.$tip(res.msg);
				}
			})
		},
		activated() {
			if(this.$route.query.typeName){
				this.typeName = this.$route.query.typeName
				this.queryId = this.$route.query.id
				this.queryType = this.$route.query.type
			}
			if (this.cateId != this.$route.query.id) {
				this.initData()
				this.onLoad()
			}
		},
		methods: {
			// 重置参数
			initData() {
				this.list = []; // 清空原有数据
				this.page = 0;
				this.finished = false;
				this.loading = true;
				this.isEmpty = false;
			},
			onLoad() {
				this.loading = true; //必须
				//加载数据
				ClassifyItem({
					page: ++this.page,
					pagesize: this.pagesize,
					cate_id: this.typeId ? this.typeId : this.queryId,
					lng: this.lng,
					lat: this.lat,
					sales_initial_order: this.salt ? this.sal : '', //1 = 销量降序 2=销量升序	,
					keyword: '',
					token: localStorage.getItem('token'),
					type: this.goodsType ? this.goodsType : this.queryType,
					price_order: this.prct ? this.prc : '', //1=价格降序 2=价格升序	
				}).then(res => {
					if (res.code == 1) {
						this.isReload = false;
						this.cateId = this.$route.query.id;
						this.cart_num = res.data.cart_num;
						this.list = [...this.list, ...res.data];
						this.loading = false;
						this.finished = Number(res.data.length) >= Number(this.pagesize) ? false : true;
						this.isEmpty = this.list.length > 0 ? false : true;
						this.$route.query.id = ''
						this.$route.query.type = ''
						this.goodsType = null
					}

				})

			},
			// 种类弹窗
			selectType() {
				this.lat = '';
				this.lng = '';
				this.types = !this.types;
				this.ages = false;
			},
			// 选择种类
			firstStep(item) {
				console.log(item.id)
				if (item.id == 0) {
					this.fir = null;
					this.typeId = 0;
					this.typeName = '分类';
					this.types = false;
					this.goodsType = null
					this.item_cate = [];
					this.initData();
					this.onLoad();
				} else {
					this.fir = item.id;
					this.typeId = item.id;
					this.typeName = item.name;
					this.item_cate = item.child;
					if (this.item_cate.length == undefined) {
						this.types = false;
						this.initData();
						this.onLoad();
					}
				}
			},
			secstep(val, name,type) {
				this.sec = val;
				this.types = false;
				this.typeId = val;
				this.typeName = name;
				this.goodsType = type;
				this.initData();
				this.onLoad();
			},
			// 年龄弹窗
			selectAge() {
				this.lng = '115.937315';
				this.lat = '115.937315';
				this.initData();
				this.onLoad();
			},
			// 价格弹窗
			// 选择价格
			selectPrice() {
				this.lat = '';
				this.lng = '';
				this.prct = true;
				this.prc == 1 ? this.prc = 2 : this.prc = 1;
				this.salt = false;
				this.sal = 1;
				this.types = false
				this.ages = false
				this.initData();
				this.onLoad();
			},
			// 销量弹窗
			// 选择销量
			selectSale() {
				this.lat = '';
				this.lng = '';
				this.salt = true;
				this.sal == 1 ? this.sal = 2 : this.sal = 1;
				this.prct = false;
				this.prc = 1;
				this.types = false;
				this.ages = false;
				this.initData();
				this.onLoad();
			},
			// 商品详情
			toDetail(id, type) {
				// 实物
				if (type == 0) {
					this.$router.push('/goodsDetail?id=' + id)
				} else {
					// 虚拟
					this.$router.push('/detail?id=' + id + '&type=' + type)
				}
			},
		},
	}
</script>
<style lang="less" scoped>
	.classify {
		min-height: 100vh;
		background-color: #f5f5f5;

		.head-search {
			width: 100%;
			max-width: 750px;
			height: 0.98rem;
			position: fixed;
			z-index: 120;
			top: 0.88rem;
			left: 0;
			right: 0;
			margin: 0 auto;
			padding: 0.2rem 0.28rem;
			background-color: #f5f5f5;

			input {
				height: 0.58rem;
				padding-left: 0.6rem;
				border-radius: 0.29rem;
				background: url('~@/assets/nav_search.png') no-repeat 0.26rem center #ececec;
				background-size: 0.28rem;
			}
		}

		// 分类
		.items {
			width: 100%;
			max-width: 750px;
			height: 0.88rem;
			margin: 0 auto;
			position: fixed;
			z-index: 120;
			top: 1.86rem;
			left: 0;
			right: 0;
			background-color: #fff;
			border-bottom: 1px solid #dbdbdb;

			.item {
				height: .88rem;
				color: #333;
				font-size: 0.28rem;

				p {
					position: relative;
				}

				p::after {
					content: "";
					width: 0.14rem;
					height: 0.14rem;
					margin: auto 0;
					position: absolute;
					z-index: 99;
					top: 0;
					right: -0.2rem;
					bottom: 0;
					background: url('~@/assets/down-ico.png') no-repeat center;
					background-size: 0.14rem;
				}
			}

			.price.red.up {
				p::after {
					background: url('~@/assets/down-ico-on.png') no-repeat center;
					background-size: 0.14rem;
					transform: rotate(180deg);
					filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
				}
			}

			.sales.red.down {
				p::after {
					background: url('~@/assets/down-ico-on.png') no-repeat center;
					background-size: 0.14rem;
					transform: rotate(360deg);
					filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
				}
			}

			.sales.red.up {
				p::after {
					background: url('~@/assets/down-ico-on.png') no-repeat center;
					background-size: 0.14rem;
					transform: rotate(180deg);
					filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
				}
			}

			.price.red.down {
				p::after {
					background: url('~@/assets/down-ico-on.png') no-repeat center;
					background-size: 0.14rem;
					transform: rotate(360deg);
					filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
				}
			}
		}

		.fixed-space {
			width: 100%;
			height: 1.86rem;
		}

		// 种类弹窗
		.type-popup,
		.age-popup {
			top: 2.74rem;
			z-index: 115 !important;
			background-color: transparent !important;

			.type-lists-box {
				width: 45%;
				max-height: 6rem;
				padding: 0 0.28rem;
				background-color: #fff;
				overflow: hidden;

				.type-lists {
					overflow: scroll;

					.type-list {
						margin: 0.2rem 0;
						line-height: 0.6rem;
						font-size: 0.28rem;
						color: #333;
					}
				}
			}

			.second-menu {
				width: 65%;
				background-color: #f2f0f0;

				.red {
					background: url('~@/assets/red-check.png') no-repeat right center;
					background-size: 0.28rem 0.2rem;
				}
			}
		}

		// 列表
		.lists {
			padding: 0.28rem 0.24rem 0;
			background-color: #fff;

			.list {
				padding: 0.24rem 0;
				border-bottom: 1px solid #dbdbdb;

				.list-img {
					width: 1.8rem;
					height: 1.8rem;
					border-radius: 0.1rem;
					overflow: hidden;
				}

				.list-right {
					margin-left: 0.2rem;
					font-size: 0.3rem;
					line-height: 120%;
					color: #333;

					h3 {
						font-size: 0.3rem;
						line-height: 130%;
					}

					.guige {
						font-size: 0.24rem;
					}

					.address {
						padding-left: 0.34rem;
						background: url('~@/assets/address-ico.png') no-repeat left center;
						background-size: 0.2rem;
					}

					.price-box {
						color: #EE1C1A;

						.red {
							margin: auto 0 0;

							p {
								font-size: 0.34rem;

								span {
									font-size: 0.2rem;
									line-height: 120%;
									color: #999;
								}
							}
						}

						.share-earn {
							font-size: 0.24rem;
						}

						.buy-btn {
							font-size: 0.22rem;
							line-height: 120%;
							color: #999;
						}
						.sales{
							// width: 1.3rem;
							height: 0.4rem;
							font-size: 0.2rem;
							line-height: 0.4rem;
							color: #EE1C1A;
							border-radius: 0.1rem;
							background-color: #FFF6F6;
						}
						
					}
					
				}
			}

			.list:last-child {
				border-bottom: none;
			}
		}

		// 购物车
		.index-shopping-cart {
			width: 0.82rem;
			height: 0.82rem;
			margin: auto;
			position: fixed;
			z-index: 100;
			bottom: 1.04rem;
			right: 0.28rem;
			border-radius: 100%;
			box-shadow: 0 0 0.1rem 0.1px rgba(0, 0, 0, 0.6);
			background-color: #fff;

			.cart-img {
				width: 0.5rem;
				height: 0.44rem;
				margin: auto;
				position: relative;

				.point {
					width: 0.28rem;
					height: 0.28rem;
					margin: auto;
					position: absolute;
					z-index: 100;
					top: -0.12rem;
					right: -0.12rem;
					border-radius: 100%;
					font-size: 0.22rem;
					color: #fff;
					background-color: #ff2e2e;
				}
			}
		}
	}
</style>
<style lang="less">
	.classify {
		/deep/.pub-head .head-box {
			z-index: 200 !important;
		}

		/deep/.van-overlay {
			top: 2.74rem;
			z-index: 110 !important;
		}
	}
</style>
